<template>
  <div class="detail">
    <!-- 登录提醒 -->
    <div class="login-notic" v-show="isShow">
      为方便您购买，请提前登录
      <a href="javascript:;" @click="login()">立即登录 </a>
      <span class="iconfont icon-shanchu" @click="cloceNotice()"></span>
    </div>

    <!-- 购买详情 -->
    <div class="detail-box container">
      <!-- 左侧产品轮播图 606 -->
      <div class="left-img">
        <div class="swiper-box">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide
              ><img src="/imgs/detail-swiper2.jpg" alt="" />
            </swiper-slide>
            <swiper-slide
              ><img src="/imgs/detail-swiper1.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="/imgs/detail-swiper3.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="/imgs/detail-swiper4.jpg" alt=""
            /></swiper-slide>
            <swiper-slide
              ><img src="/imgs/detail-swiper5.jpg" alt=""
            /></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next" slot="button-next"></div>
            <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
          </swiper>
        </div>
      </div>
      <!-- 右侧产品参数 600-->
      <div class="right-info">
        <div class="produce-box">
          <h3>小米10至尊纪念版</h3>

          <p>
            <font color="#ff4a00"
              >「+1元得十周年纪念T恤；碎屏保、延保5折；最高享24期免息；可使用北京消费券；购机得双倍米金」</font
            >
            120X 超远变焦 / 120W 秒充科技 / 120Hz刷新率 + 240Hz采样率 /
            骁龙865旗舰处理器 / 双模5G / 10倍混合光学变焦 /
            OIS光学防抖+EIS数字防抖 / 2000万超清前置相机 /
            双串蝶式石墨烯基锂离子电池 / 等效4500mAh大电量 / 120W
            有线秒充+50W无线秒充+10W无线反充 / WiFi 6 / 多功能NFC / 红外遥控
          </p>
          <p class="xiaomi">小米自营</p>
          <p class="price">5599 元</p>
        </div>
        <div class="address-box">
          <span class="iconfont icon-dizhi"></span>
          <span class="provinces">北京</span>
          <span class="city">北京市</span>
          <span class="district">海淀区</span>
          <span class="road">清河街道</span>
          <a href="javascript:'">修改</a>
          <p class="xianhuo">有现货</p>
        </div>
        <div class="buy-option">
          <div class="basic-box">
            <div class="item">
              <div class="title">选择颜色</div>
              <ul>
                <li
                  v-for="item in productList"
                  :key="item.id"
                  :class="cateId === item.cateId ? 'active' : ''"
                  @click="selectColor(item.cateId)"
                >
                  <a href="javascript:;">{{ item.color }}</a>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title">选择版本</div>
              <ul>
                <li
                  v-for="item in productList[cateId].child"
                  :key="item.childId"
                  :class="childId === item.childId ? 'active' : ''"
                  @click="selectMemory(item.childId)"
                >
                  <a href="javascript:;">{{ item.memory }}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="service-box">
            <div class="item">
              <div class="title">
                选择小米提供的意外保险
                <a href="javascript:;"
                  >了解意外保险<span class="iconfont icon-arrow-right"></span
                ></a>
              </div>
              <ul>
                <li
                  v-for="(item, index) in serviceList.acident"
                  :key="index"
                  :class="acident === item.id ? 'active' : ''"
                  @click="chooseAcident(item.id)"
                >
                  <span class="my-icon my-icon-radio">
                    <em>√</em>
                  </span>

                  <div class="txt">
                    <h3 class="name">
                      {{ item.name }}
                      <span class="save-price">已省{{ item.savePrice }}元</span>
                    </h3>
                    <p class="desc">{{ item.desc }}</p>
                    <img src="../../public/imgs/bao.png" alt="" class="bao" />

                    <div class="agreement-box">
                      <span class="my-icon my-icon-checkbox">
                        <em>√</em>
                      </span>
                      我已阅读
                      <a href="javascript:;">服务条款｜</a>
                      <a href="javascript:;">阅读声明</a>
                      <span class="price">{{ item.price }}元</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title">
                选择小米提供的延长保修
                <a href="javascript:;"
                  >了解延长保修<span class="iconfont icon-arrow-right"></span
                ></a>
              </div>
              <ul>
                <li
                  v-for="(item, index) in serviceList.gurantee"
                  :key="index"
                  :class="gurantee === item.id ? 'active' : ''"
                  @click="chooseGurantee(item.id)"
                >
                  <span class="my-icon my-icon-radio">
                    <em>√</em>
                  </span>

                  <div class="txt">
                    <h3 class="name">
                      {{ item.name }}
                      <span class="save-price">已省{{ item.savePrice }}元</span>
                    </h3>
                    <p class="desc">{{ item.desc }}</p>
                    <img src="../../public/imgs/bao.png" alt="" class="bao" />

                    <div class="agreement-box">
                      <span class="my-icon my-icon-checkbox">
                        <em>√</em>
                      </span>
                      我已阅读
                      <a href="javascript:;">服务条款｜</a>
                      <a href="javascript:;">阅读声明</a>
                      <span class="price">{{ item.price }}元</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title">
                选择小米提供的云空间服务
                <a href="javascript:;"
                  >了解云空间服务<span class="iconfont icon-arrow-right"></span
                ></a>
              </div>
              <ul>
                <li
                  v-for="(item, index) in serviceList.cloud"
                  :key="index"
                  :class="cloud === item.id ? 'active' : ''"
                  @click="chooseCloud(item.id)"
                >
                  <span class="my-icon my-icon-radio">
                    <em>√</em>
                  </span>

                  <div class="txt">
                    <h3 class="name">
                      {{ item.name }}
                      <span class="save-price">已省{{ item.savePrice }}元</span>
                    </h3>
                    <p class="desc">{{ item.desc }}</p>
                    <img src="../../public/imgs/bao.png" alt="" class="bao" />

                    <div class="agreement-box">
                      <span class="my-icon my-icon-checkbox">
                        <em>√</em>
                      </span>
                      我已阅读
                      <a href="javascript:;">服务条款｜</a>
                      <a href="javascript:;">阅读声明</a>
                      <span class="price">{{ item.price }}元</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="selected-box">
          <p>
            小米10至尊纪念版
            <span> {{ productList[cateId].color }}</span>
            <span> {{ productList[cateId].child[childId].memory }}</span>
            <span class="price"
              >{{ productList[cateId].child[childId].price }}元</span
            >
          </p>
          <p v-if="acident !== ''">
            {{ serviceList.acident[acident].name }}
            <span class="price"
              >{{ serviceList.acident[acident].price }}元</span
            >
          </p>
          <p v-if="gurantee !== ''">
            {{ serviceList.gurantee[gurantee].name }}
            <span class="price"
              >{{ serviceList.gurantee[gurantee].price }}元</span
            >
          </p>
          <p v-if="cloud !== ''">
            {{ serviceList.cloud[cloud].name }}
            <span class="price">{{ serviceList.cloud[cloud].price }}元</span>
          </p>

          <div class="sum">
            总计：<span>{{ sum }}</span> 元
          </div>
        </div>
        <!-- 加入购物车或喜欢列表 -->
        <div class="btn-box">
          <div class="sale-btn">
            <a href="javascript:;">加入购物车</a>
          </div>
          <div class="favorite-btn">
            <a href="javascript:;">
              <span class="iconfont icon-xihuan"></span>
              喜欢</a
            >
          </div>
        </div>
        <div class="after-sale-info">
          <ul>
            <li>
              <span class="iconfont icon-duigou"></span>
              小米自营
            </li>
            <li>
              <span class="iconfont icon-duigou"></span>
              小米发货
            </li>
             <li>
              <span class="iconfont icon-duigou"></span>
              7天无理由退货
            </li>
             <li>
              <span class="iconfont icon-duigou"></span>
              运费说明
            </li>
             <li>
              <span class="iconfont icon-duigou"></span>
             企业信息
            </li>
             <li>
              <span class="iconfont icon-duigou"></span>
              售后服务政策
            </li>
             <li>
              <span class="iconfont icon-duigou"></span>
              7天价格保护
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
export default {
  data () {
    return {
      // 控制登录提醒的显示和隐藏
      isShow: true,

      // 选中的颜色
      cateId: 0,
      // 选中的内存
      childId: 0,
      // 选中的意外保险
      acident: '',
      // 选中的延长保修
      gurantee: '',
      // 选中的云空间服务
      cloud: '',
      // 总价
      // sum: 0,

      //  :class="selectedList.color === index ? 'active' : ''"
      productList: [
        {
          cateId: 0,
          color: '陶瓷黑',
          child: [
            {
              childId: 0,
              memory: '8GB+256GB',
              price: 5599
            },
            {
              childId: 1,
              memory: '8GB+128GB',
              price: 5299
            },
            {
              childId: 2,
              memory: '12GB+256GB',
              price: 5999
            },
            {
              childId: 3,
              memory: '16GB+512GB',
              price: 6999
            }
          ]
        },
        {
          cateId: 1,
          color: '透明版',
          child: [
            {
              childId: 0,
              memory: '8GB+256GB',
              price: 5599
            },
            {
              childId: 1,
              memory: '8GB+128GB',
              price: 5299
            },
            {
              childId: 2,
              memory: '12GB+256GB',
              price: 5999
            }
          ]
        },
        {
          cateId: 2,
          color: '亮银版',
          child: [
            {
              childId: 0,
              memory: '16GB+512GB',
              price: 6999
            }
          ]
        }
      ],

      // 服务项目列表
      serviceList: {
        // 意外保护
        acident: [
          {
            id: 0,
            name: '意外保障服务',
            desc: '手机意外碎屏/进水/碾压等损坏',
            price: '349',
            savePrice: '349'
          },
          {
            id: 1,
            name: '碎屏保障服务',
            desc: '手机意外碎屏',
            price: '125',
            savePrice: '124'
          }
        ],
        // 延长保修
        gurantee: [
          {
            id: 0,
            name: '延长保修服务',
            desc: '厂保延一年，性能故障免费维修',
            price: '79',
            savePrice: '80'
          }
        ],
        // 云空间服务
        cloud: [
          {
            id: 0,
            name: '云空间年卡200G',
            desc: '主商品签收后，自动激活至下单帐号',
            price: '159',
            savePrice: '159'
          },
          {
            id: 1,
            name: '云空间年卡 50G',
            desc: '主商品签收后，自动激活至下单帐号',
            price: '49',
            savePrice: '49'
          },
          {
            id: 2,
            name: '云空间月卡200G',
            desc: '主商品签收后，自动激活至下单帐号',
            price: '1',
            savePrice: '18'
          },
          {
            id: 3,
            name: '云空间月卡50G',
            desc: '主商品签收后，自动激活至下单帐号',
            price: '6',
            savePrice: '6'
          }
        ]
      },

      // 轮播图配置
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'custom',
          renderCustom: function (swiper, current, total) {
            var customPaginationHtml = ''
            for (let i = 0; i < total; i++) {
              if (i === current - 1) {
                customPaginationHtml +=
                  "<span class='my-bullet my-bullet-active'></span>"
              } else customPaginationHtml += '<span class="my-bullet"></span>'
            }
            return customPaginationHtml
          }
        },
        loop: true,
        autoplay: true,
        effect: 'fade',
        speed: 800, // 控制动画过渡时间
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    sum: function () {
      var p1 = this.productList[this.cateId].child[this.childId].price
      var p2 =
        this.acident === ''
          ? 0
          : Number(this.serviceList.acident[this.acident].price)
      var p3 =
        this.gurantee === ''
          ? 0
          : Number(this.serviceList.gurantee[this.gurantee].price)
      var p4 =
        this.cloud === '' ? 0 : Number(this.serviceList.cloud[this.cloud].price)
      // console.log([p1, p2, p3, p4])
      return p1 + p2 + p3 + p4
    }
  },

  components: {
    Swiper,
    SwiperSlide
  },
  created () {
    if (this.$cookie.get('userId')) this.isShow = false
  },
  methods: {
    // 跳转到登录页面
    login () {
      this.$router.push('/login')
    },
    // 关闭登录提醒
    cloceNotice () {
      this.isShow = false
    },
    // 选择颜色
    selectColor (id) {
      this.cateId = id
      // console.log('cateId:' + id)
    },
    // 选择版本
    selectMemory (id) {
      this.childId = id
      // console.log('childId:' + id)
    },
    // 选择服务-意外保险
    chooseAcident (id) {
      this.acident = this.acident === id ? '' : id
      console.log(this.acident)
    },
    // 选择服务-延长保修
    chooseGurantee (id) {
      this.gurantee = this.gurantee === id ? '' : id
    },
    // 选择服务-云空间
    chooseCloud (id) {
      this.cloud = this.cloud === id ? '' : id
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  background-color: #fff;
  .login-notic {
    width: 100%;
    height: 52px;
    background: rgb(247, 247, 247);
    text-align: center;
    line-height: 52px;
    color: rgb(51, 51, 51);
    font-size: 14px;
    a {
      display: inline-block;
      color: rgb(255, 103, 0);
      margin-left: 25px;
    }
    span {
      display: inline-block;
      width: 16px;
      height: 100%;
      color: #b5b5b5;
      padding: 0 10px;
    }
  }
  .detail-box {
    display: flex;
    justify-content: space-between;
    // height: 200px;
    .left-img {
      width: 606px;
      height: 100%;
      .swiper-box {
        width: 560px;
        height: 560px;

        .swiper-container {
          height: 100%;
          --swiper-navigation-color: #ccc; /* 单独设置按钮颜色 */
          --swiper-navigation-size: 30px; /* 设置按钮大小 */

          .swiper-slide {
            img {
              width: 100%;
            }
          }

          .swiper-pagination {
            /deep/span.my-bullet {
              display: inline-block;
              background-color: #ccc;
              width: 50px;
              border-radius: 0;
              border: 0;
              height: 3px;
              margin: 0 4px;
            }
            /deep/span.my-bullet-active {
              background-color: #a3a3a3;
            }
          }
        }
      }
    }
    .right-info {
      width: 600px;
      height: 100%;
      // border: 1px solid rgb(138, 232, 245);
      .produce-box {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 12px;
        h3 {
          margin: 0;
          padding: 0;
          font-size: 24px;
          font-weight: 400;
          color: #212121;
        }
        p {
          font-size: 14px;
          color: #b0b0b0;
          margin: 0;
          padding: 0;
          padding-top: 8px;
          line-height: 1.5;
        }
        .xiaomi {
          font-size: 14px;
          color: #ff6700;
          margin-bottom: 0;
          margin-top: 14px;
          padding: 0;
        }
        .price {
          font-size: 18px;
          line-height: 1;
          color: #ff6700;
          padding: 12px 0 10px;
        }
      }
      .address-box {
        margin: 20px 0px;
        padding: 30px 50px;
        position: relative;
        background: rgb(250, 250, 250);
        border: 1px solid rgb(224, 224, 224);
        font-size: 14px;
        line-height: 1.5;
        color: rgb(51, 51, 51);
        .iconfont {
          position: absolute;
          top: 26px;
          left: 20px;
          font-size: 20px;
          color: rgb(153, 153, 153);
        }
        span {
          margin-right: 14px;
        }
        a {
          color: rgb(255, 103, 0);
          margin-right: 0;
        }
        .xianhuo {
          color: rgb(255, 103, 0);
        }
      }
      .buy-option {
        .title {
          font-size: 18px;
          color: #333;
          a {
            color: #ff6700;
            font-size: 14px;
            float: right;
            line-height: 18px;
          }
        }
        .basic-box {
          .item {
            margin-bottom: 30px;
            ul {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              li {
                width: 292px;
                height: 42px;
                border: 1px solid #e0e0e0;
                margin-top: 10px;
                &.active a {
                  color: #ff6700;
                }
                &.active {
                  border-color: #ff6700;
                }

                &:hover {
                  border-color: #ff6700;
                }
                &:hover a {
                  color: #ff6700;
                }
                a {
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  font-size: 16px;
                  line-height: 42px;
                  color: #757575;
                  text-align: center;
                }
              }
            }
          }
        }
        .service-box {
          .item {
            margin-bottom: 30px;
          }
          ul {
            margin-top: 10px;
            li {
              width: 100%;
              padding: 30px 0;
              border: 1px solid #e0e0e0;
              margin-top: -1px;
              position: relative;
              &.active {
                border-color: #ff6700;
                z-index: 2;
                h3.name {
                  color: #ff6700 !important;
                }
                .my-icon em {
                  background-color: #ff6700;
                  border-color: #ff6700;
                  color: #fff;
                }
              }
              .my-icon {
                position: absolute;

                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                cursor: pointer;
                em {
                  display: inline-block;
                  width: 14px;
                  height: 14px;
                  line-height: 14px;
                  border: 1px solid #b0b0b0;
                  font-size: 12px;
                  color: #fff;
                  vertical-align: middle;
                  font-style: normal;
                }
              }
              .my-icon-radio {
                left: 40px;
                top: 40px;
                em {
                  border-radius: 50%;
                }
              }

              .txt {
                margin-left: 142px;
                position: relative;

                img.bao {
                  position: absolute;
                  top: 0;
                  left: -60px;
                  width: 50px;
                  height: 50px;
                }
                h3.name {
                  font-size: 18px;
                  margin: 0 0 10px 0;
                  color: #333;
                  font-weight: 700;
                  .save-price {
                    display: inline-block;
                    background-color: #ff6700;
                    font-size: 14px;
                    border-radius: 20px;
                    padding: 4px 8px;
                    height: 100%;
                    color: #fff;
                  }
                }
                p.desc {
                  margin: 0;
                  padding: 0;
                  font-size: 14px;
                  height: 18px;
                  color: #b0b0b0;
                  width: 286px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-top: 5px;
                }
                .agreement-box {
                  margin-top: 5px;
                  font-size: 14px;
                  color: #333;
                  line-height: 25px;
                  position: relative;
                  padding-left: 20px;
                  .my-icon-checkbox {
                    top: -7px;
                    left: -9px;
                  }

                  // .icon-checkbox {
                  //   font-size: 22px;
                  //   float: left;
                  //   color: #b0b0b0;
                  //   margin-left: -5px;
                  // }
                  a {
                    color: #ff6700;
                    margin: 0 2px;
                    display: inline-block;
                    line-height: 1.5;
                  }
                  span.price {
                    float: right;
                    margin-right: 20px;
                    color: #757575;
                  }
                }
              }
            }
          }
        }
      }
      .selected-box {
        background: #f9f9fa;
        padding: 30px;
        margin-bottom: 30px;
        p {
          font-size: 14px;
          list-style: none;
          line-height: 30px;
          color: #616161;
          span {
            margin-left: 5px;
          }
          span.price {
            float: right;
          }
        }
        div.sum {
          color: #ff6700;
          font-size: 24px;
          padding-top: 20px;
        }
      }

      .btn-box {
        margin: 10px 0 20px 0;
        height: 54px;
        a {
          display: inline-block;
          width: 100%;
          height: 100%;
          height: 54px;
          line-height: 54px;
          font-size: 16px;
          text-align: center;
          color: #fff;
        }
        .sale-btn {
          width: 300px;
          height: 54px;
          float: left;
          margin-right: 10px;
          border: 0;
          outline: none;
          a {
            background: #ff6700;
            &:hover {
              background-color: #f35812;
            }
          }
        }
        .favorite-btn {
          width: 142px;
          height: 54px;
          float: left;
          a {
            background: #b0b0b0;
            &:hover {
              background-color: #757575;
            }
            span {
              display: inline-block;
              width: 22px;
              height: 22px;
              line-height: 22px;
              vertical-align: -3px;
              margin-right: 3px;
              font-weight: 700;
              font-size: 22px;
            }
          }
        }
      }
      .after-sale-info {
        ul {
          display: flex;
          flex-wrap: wrap;
          padding-right: 50px;
          li {
            // width: 93px;
            height: 41px;
            display: inline-block;
            line-height: 30px;
            cursor: default;
            white-space: nowrap;
            color: #b0b0b0;
            font-size: 14px;
            position: relative;
            padding-left: 20px;
            padding-right: 15px;
            box-sizing: border-box;
            span {
              position: absolute;
              font-size: 32px;
              margin-left: -27px;
              margin-top: -1px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
